---
title: Style Dictionary
template: splash
hero:
  tagline:
    Export your Design Tokens to any platform - iOS, Android, CSS, JS, HTML, sketch files, style documentation, or anything you can think of.
    Forward-compatible with <a href="https://tr.designtokens.org/format/">Design Tokens Community Group spec</a>.
  image:
    file: ../../assets/logo.png
  actions:
    - text: Documentation
      link: /getting-started/installation
      icon: right-arrow
      variant: primary
    - text: Migration to Version 4
      link: /versions/v4/migration/
      icon: up-caret
      variant: secondary
    - text: GitHub
      link: https://github.com/style-dictionary/style-dictionary
      icon: external
    - text: v3 docs
      link: https://v3.styledictionary.com
      variant: secondary
      icon: external
---

import tokens from '/public/demo-tokens.json';

## Live Demo

Below is a showcase of how a set of DTCG tokens would be exported to CSS:

<sd-playground tokens={JSON.stringify({ value: JSON.stringify(tokens, null, 2), lang: 'json'})} default-selected="tokens" id="main-demo">

  <div style="height: 100%" slot="monaco-editor"></div>
</sd-playground>

Upload your JSON or ZIP of tokens and convert them to DTCG format:
<sd-dtcg-convert></sd-dtcg-convert>

[Read more about DTCG](/info/dtcg/)
